<!-- 发票模版列表 -->
<template>
    <div class="page-box h100 display-flex czbj">
        <p class="title-label">模版列表</p>
        <div class="mt10">
            <dxtable :dataJson="dataJson" :portUrl="portUrl" :qx="qx" ref="databale" :formJson="formJson" imgkuTitle="印章图片"
                :czFun="czFun"></dxtable>
        </div>
        <n-modal v-model:show="showModal" preset="card" class="iframeerrrfwewe-diagnosis" >
            <template #header>
                <div>浏览模版</div>
            </template>
            <div>
                <iframe :src="iframeUrl" class="iframeerrrfwewe"></iframe>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="showModal=false"> 关闭 </n-button>
                </div>
            </template>
        </n-modal>
    </div>
</template>
<script lang='ts' setup>
import dxtable from "./../../components/util/dxtable.vue";
import sort from "../../components/util/sort.vue";
import { NButton } from "naive-ui";
import { h, ref, reactive } from "vue";

const showModal = ref(false)
const initeer = () => {
    databale.value.initDataExpose();
};

const iframeUrl = ref()
const databale = ref();
// 弹窗公用该列表 
let dataJson = reactive([
    {
        title: "id",
        key: "id",
    },
    {
        title: "公司名称",
        key: "name",
        search: true, // 是否在搜索栏展示
    }, {
        title: "税号",
        key: "dutyParagraph",
    },
    {
        title: "印章",
        key: "seal",
        render(row) {
            return h("img", { src: row.seal, class: 'cpfmddfgdtr' })

        }
    },
    {
        title: "排序",
        width: 100,
        render(row) {
            row.databaseName = "flistInvoiceTemplates";
            return h(sort, {
                row,
                onCallBack: () => {
                    initeer();
                },
            });
        },
    },
    {
        title: "创建时间",
        key: "addTime",
        width: "200",
        type: "daterange",
    },
]);
let portUrl = "fapiao/flistInvoiceTemplates";
const qx = {
    DeletePermissionID: "flistInvoiceTemplatesdel", //删除
    EditPermissionIdentifier: "flistInvoiceTemplatesbj", // 编辑
    NewPermissionIdentifier: "flistInvoiceTemplatesxz", // 新建
    ViewPermissionID: "flistInvoiceTemplatesck", // 查看
};
let formJson = reactive([
    {
        title: "公司名称",
        key: "name",
        type: "input",
        span: 24,
        required: true, // 是否为必填
    }, {
        title: "税号",
        key: "dutyParagraph",
        type: "input",
        required: true, // 是否为必填
    },
    {
        title: "印章",
        key: "seal",
        type: "img",
        val: ""
    },
]);


const czFun = {
    fun: (row) => {
        return [
            h(
                NButton,
                {
                    type: "info",
                    quaternary: true,
                    onClick: async (e) => {
                        iframeUrl.value = import.meta.env.VITE_APIURL+'fapiao/templateList?id='+row.id
                        showModal.value = true
                    },
                },
                "浏览模版"
            ),

        ];
    },
};

</script>
<style scoped>
    .iframeerrrfwewe{
        border: 0;
        width: 100%;
        height: 540px;
    }
 
</style>


